cody - HTMLify profile
cody
4270 Files
632075 Views
Latest files of /cody/vishal-dcode/Theme Switcher
app.js
cody/vishal-dcode/Theme Switcher/app.js
const html = document.querySelector('html');
const themeToggleBtn = document.getElementById('theme-toggle-btn');
const themeButtons = document.querySelectorAll('.theme-btn');
themeToggleBtn.addEventListener('click', (e) => {
const target = e.target;
console.log(target);
const themeToggleBtn = document.getElementById('theme-toggle-btn');
const themeButtons = document.querySelectorAll('.theme-btn');
themeToggleBtn.addEventListener('click', (e) => {
const target = e.target;
console.log(target);
style.css
cody/vishal-dcode/Theme Switcher/style.css
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap";
:root {
--clr-black: #000;
--clr-white: #fff;
--clr-text: var(--clr-neutral-400);
--clr-bg: var(--clr-neutral-200);
}
html[data-theme="red-mode"] {
:root {
--clr-black: #000;
--clr-white: #fff;
--clr-text: var(--clr-neutral-400);
--clr-bg: var(--clr-neutral-200);
}
html[data-theme="red-mode"] {
index.html
cody/vishal-dcode/Theme Switcher/index.html
<!DOCTYPE html>
<html lang="en" data-theme="dark-mode">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
<html lang="en" data-theme="dark-mode">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"